<template>
	<div>
		<div style="width: 100%;height: 20px;background-color: #ebedf0;"></div>
		<div style="display: block;width: 100%;text-align: left;margin-top: 50px;margin-bottom: 40px;">
			<Row style="text-align: left;margin-top: 40px;">
				<span style="border-left: 5px solid #517EDB;font-size: 16px;"></span>
				<span style="font-size: 16px;font-weight: 800;margin-left: 41px;">我的资料</span>
			</Row>
			<Row style="padding:35px 40px 0px 45px;">
				<Col span="24" style="text-align: left;">
				<span style="font-size: 14px;">姓&nbsp;&nbsp;&nbsp;&nbsp;名：</span>
				<span style="font-size: 14px;">{{username}}</span>
				</Col>
			</Row>
			<Row style="padding:35px 40px 0px 45px;" v-if="classe==''?false:true">
				<Col span="24" style="text-align: left;">
				<span style="font-size: 14px;">班&nbsp;&nbsp;&nbsp;&nbsp;级：</span>
				<span style="font-size: 14px;">{{classe}}</span>
				</Col>
			</Row>
			<Row style="padding:35px 40px 0px 45px;" v-if="classe==''?false:true">
				<Col span="24" style="text-align: left;">
				<span style="font-size: 14px; ">学&nbsp;&nbsp;&nbsp;&nbsp;号：</span>
				<span style="font-size: 14px;">{{studentno}}</span>
				</Col>
			</Row>
			<Row style="padding:35px 40px 0px 45px;" v-if="teacherno==''?false:true">
				<Col span="24" style="text-align: left;">
				<span style="font-size: 14px;" v-if="teacherno==''?false:true">工&nbsp;&nbsp;&nbsp;&nbsp;号：</span>
				<span style="font-size: 14px;">{{teacherno}}</span>
				</Col>
			</Row>
			<Row style="padding:35px 40px 0px 45px;" v-if="schoolname==''?false:true">
				<Col span="24" style="text-align: left;">
				<span style="font-size: 14px;">学&nbsp;&nbsp;&nbsp;&nbsp;校：</span>
				<span style="font-size: 14px;">{{schoolname}}</span>
				</Col>
			</Row>
		</div>

		<div style="width: 100%;height: 20px;background-color: #ebedf0;"></div>

		<div style="display: block;width: 100%;text-align: left;margin-top: 50px;margin-bottom: 40px;">
			<Row style="text-align: left;margin-top: 40px;">
				<span style="border-left: 5px solid #517EDB;font-size: 16px;"></span>
				<span style="font-size: 16px;font-weight: 800;margin-left: 41px;">绑定手机</span>
			</Row>
			<Row style="padding:35px 40px 0px 45px;">
				<Col span="24" style="text-align: left;">
				<span style="font-size: 14px;">手&nbsp;机&nbsp;号&nbsp;码：</span>
				<input oninput="value=value.replace(/[^\d]/g,'')" maxlength="11" v-model="mobilephone1" :disabled="edit" type="text" value="mobilephone1" placeholder="请输入手机号" style="text-align: center; width: 20%;position: relative;height: 30px;line-height: 30px;ime-mode:inactive;">
				<Button v-if="show==true?true:false" @click="binding" style="margin-left: 40px;" size="large" type="primary">绑定</Button>
				<Button v-if="show==true?false:true" @click="cancelbinding" style="margin-left: 40px;" size="large" type="primary">取消绑定</Button>
				</Col>
			</Row>
		</div>

		<div style="width: 100%;height: 20px;background-color: #ebedf0;"></div>

		<div style="display: block;width: 100%;text-align: left;margin-top: 50px;margin-bottom: 40px;">
			<Row style="text-align: left;margin-top: 40px;">
				<span style="border-left: 5px solid #517EDB;font-size: 16px;"></span>
				<span style="font-size: 16px;font-weight: 800;margin-left: 41px;">修改密码</span>
			</Row>
			<Row style="padding:35px 40px 0px 45px;">
				<Col span="24" style="text-align: left;">
				<span style="font-size: 14px;">原&nbsp;始&nbsp;密&nbsp;码：</span>
				<input v-model="oldpassword" type="password" placeholder="使用数字或数字加字母，8-12位" style="text-align: center; width: 20%;position: relative;height: 30px;line-height: 30px;">
				</Col>
			</Row>
			<Row style="padding:35px 40px 0px 45px;">
				<Col span="24" style="text-align: left;">
				<span style="font-size: 14px;">新&nbsp;&nbsp;&nbsp;密&nbsp;&nbsp;&nbsp;码：</span>
				<input v-model="newpassword" type="password" placeholder="使用数字或数字加字母，8-12位" style="text-align: center; width: 20%;position: relative;height: 30px;line-height: 30px;">
				</Col>
			</Row>
			<Row style="padding:35px 40px 0px 45px;">
				<Col span="24" style="text-align: left;">
				<span style="font-size: 14px;">确&nbsp;认&nbsp;密&nbsp;码：</span>
				<input v-model="new2password" type="password" placeholder="使用数字或数字加字母，8-12位" style="text-align: center; width: 20%;position: relative;height: 30px;line-height: 30px;">
				</Col>
			</Row>
			<div style="text-align: left;">
				<Button @click="modify" style="margin:40px 0px 0px 118px;width: 180px;height: 50px;" size="large" type="primary">提交修改</Button>
			</div>
		</div>

	</div>
</template>

<script>
	import personalcenter from "@/components/template/Personalcenter"
	//	import md5 from 'md5'
	import { mapState } from 'vuex'
	import axios from 'axios'
	import api from "@/components/js/Apidomain.js"
	import { setlocalstorage, setsessionstorage, removesessionstorage, removelocalstorage } from "@/components/js/Localstorage.js"

	export default {

		data() {
			return {
				show:"",
				edit:"",
				mobilephone1: "",
				Role: '',
				roleId: '',
				username: '',
				classe: '',
				studentno: '',
				teacherno: '',
				schoolname: '',
				inputPerformName: "",
				oldpassword: "",
				newpassword: "",
				new2password: "",
			}
		},
		mounted() {
			document.getElementsByName("phone").value==self.mobilephone1;
		},
		created(){
			this.init(); //页面初始化加载
		},
		methods: {
			init() {
				var edit
				var self = this;
				this.Role = sessionStorage.getItem('role');
				//					//console.log(Role);
				this.roleId = sessionStorage.getItem('roleid');
				//	            		this.userName= sessionStorage.getItem('username');

				let url = api.apidomain + '/tqes/web/sysUser/getSystemUserMyInfo';
				this.$http.post(url, {
						"roleid": this.roleId,
					}).then(function(response) {
						if(response.data.success == true) {
							////console.log(response.data.data)
							//							setsessionstorage('serialno',response.data.data.studentNo);
							//							setsessionstorage('classEs',response.data.data.classes);
							self.username = response.data.data.userName;
							self.classe = response.data.data.classes;
							self.studentno = response.data.data.studentNo;
							self.teacherno = response.data.data.teacherNo;
							self.schoolname = response.data.data.schoolName;
							self.mobilephone1 = response.data.data.mobilePhone;
							if(self.mobilephone1 == "") {
								self.edit = false;
								self.show = true;
							} else {
								self.edit = true;
								self.show = false;
							}

							//console.log(response.data.data.classes)
							//console.log(response.data.data.studentNo)
						} else if(response.data.success == false) {
							self.$Message.error({
								content: response.data.msg,
								duration: 10,
								closable: true
							});	
						}
					})
					.catch(function(error) {
						self.$Message.error({
							content: '系统发生错误：错误码00276',
							duration: 10,
							closable: true
						});
					});

			},
			binding() {
				var self = this;
				if(this.mobilephone1 == "") {
					self.$Message.error({
								content: '手机号为空，请输入手机号',
								duration: 10,
								closable: true
							});
				}
				if(/^1(3|4|5|7|8)\d{9}$/.test(this.mobilephone1)) {
					var self = this;
					let url = api.apidomain + "/tqes/web/sysUser/updateUserMobilePhone"
					this.$http.post(url, {
							"mobilePhone": this.mobilephone1
						}).then(function(response) {
							if(response.data.success == true) {
								console.log(response)
								self.$Message.success({
				                    content: response.data.msg,
				                    duration: 10,
				                    closable: true
		               			})
								self.init();
							} else if(response.data.success == false) {
								self.$Message.error({
									content: response.data.msg,
									duration: 10,
									closable: true
								});	
							}
						})
						.catch(function(error) {
							self.$Message.error({
							content: '系统发生错误：错误码00277',
							duration: 10,
							closable: true
						});
						});
				} else {
					self.$Message.error({
								content: '手机号不符合规则',
								duration: 10,
								closable: true
							});	
				}

			},
			cancelbinding() {
				var self = this;
				var self = this;
				let url = api.apidomain + "/tqes/web/sysUser/updateUserMobilePhone"
				this.$http.post(url, {
						"mobilePhone": ""
					}).then(function(response) {
						if(response.data.success == true) {
							console.log(response)
							self.$Message.success({
			                    content: response.data.msg,
			                    duration: 10,
			                    closable: true
	               			})
							self.init();
						} else if(response.data.success == false) {
							self.$Message.error({
								content: response.data.msg,
								duration: 10,
								closable: true
							});	
						}
					})
					.catch(function(error) {
						self.$Message.error({
							content: '系统发生错误：错误码00278',
							duration: 10,
							closable: true
						});
					});
			},
			modify() {
				var self = this;
				if(this.oldpassword == "" || this.newpassword == "" || this.new2password == "") {
					self.$Message.error({
								content: '请输入密码，密码不能为空',
								duration: 10,
								closable: true
							});	

				}
				if(/^(?![a-zA-Z]+$)[0-9A-Za-z]{8,12}$/.test(this.newpassword)) {
					if(this.newpassword == this.new2password) {
						//							let oldmd5 = md5(this.oldpassword)
						//							let newmd5 = md5(this.newpassword)
						//							//console.log(oldmd5)
						//							//console.log(newmd5)
						let url = api.apidomain + "/tqes/web/sysUser/repertPwd"
						//					this.loadingshow = true;
						var self = this;
						this.$http.post(url, {
								"loginPwdB": this.oldpassword,
								"repertPwd": this.newpassword
							})
							.then(function(response) {
								//								//console.log(response)
								if(response.data.msg == "原密码输入有误，请重新输入！") {
									self.$Message.error({
										content: '原密码输入有误',
										duration: 10,
										closable: true
									});	
								}
								if(response.data.success == true) {
									self.$Message.success({
					                    content: '密码修改成功，请重新登录',
					                    duration: 10,
					                    closable: true
			               			})
									self.$router.push('/login')
								}
								//							if(response.data.type == 5){
								//								Toast({
								//									message: '服务器异常',
								//									position: 'middle',
								//									duration: 1000
								//								}); 
								//							}
							})
							.catch(function(error) {
								//console.log(error);
							});
					} else {
						self.$Message.error({
								content: '新密码不一致',
								duration: 10,
								closable: true
							});
						return;
					}
				} else {
					self.$Message.error({
								content: '密码不符合规则',
								duration: 10,
								closable: true
							});
				}
			}
		},

	}
</script>

<style scoped>
	.mui-badge {
		background-color: rgba(0, 0, 0, 0) !important;
		font-size: 14px;
		color: #888888;
	}
</style>